<template>
	<view class="container">
		<u-navbar title="特长标签" @leftClick="toBack" placeholder></u-navbar>
		<view class="navBig">
			<view class="topnav" style="padding: 0 10rpx;">
				<text>特长标签</text>
				<text>您最多可以添加10个特长标签，还可以添加自定义标签哦</text>
			</view>
			<view class="tagbox">
				<view class="tag" v-for="(item,index) in data.resumeTag" :key="item.id">
					<u-tag @click="tagclick(index)" :text="item.name" :type="item.type?'primary':'info'"
						shape="circle" />
				</view>

			</view>
			<view style="padding: 0 10rpx;"><u-tag @click="toziyou" text="+自定义" type="primary" shape="circle" /></view>

		</view>
		<u-modal @confirm="confirm" title="添加自定义标签" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="true" v-model="data.show">
			<view class="slot-content"
				style="height: 200rpx; display: flex;align-items: center;justify-content: center;">
				<u-field :border-bottom="false" label-width="0" maxlength="5" v-model="data.zidingyi"
					placeholder="请输入标签内容(不超过5个字)" />
			</view>
		</u-modal>
		<view class="btnBox">
			<button @tap="$u.throttle(toSave, 2000)">保存</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const data = ref({
		isNav: true,
		listdata: [],
		resumeTag: [],
		passdata: [],
		show: false,
		titleStyle: {
			'font-size': '32rpx',
			'color': '#000',
			'font-weight': 'bold'
		},
		zidingyi: ""
	})
	const tagclick = (index) => {

		let length = data.value.passdata.length;
		if (length > 9) {
			uni.$u.toast('您最多只能保存10个特长标签')
			if (data.value.resumeTag[index].type) {
				data.value.resumeTag[index].type = !data.value.resumeTag[index].type
			}
		} else {

			data.value.resumeTag[index].type = !data.value.resumeTag[index].type
		}
		let passdata = []
		for (var i = 0; i < data.value.resumeTag.length; i++) {
			if (data.value.resumeTag[i].type == true) {
				if (data.value.resumeTag[i].id == undefined) {
					passdata.push(data.value.resumeTag[i].name)
				} else {
					passdata.push(data.value.resumeTag[i].id)
				}
			}
		}
		data.value.passdata = passdata
	}
	const toziyou = () => {
		let length = data.value.passdata.length;

		if (length > 9) {
			uni.$u.toast('您最多只能保存10个特长标签')
		} else {
			data.value.show = true
		}
	}
	const confirm = () => {
		if (data.value.zidingyi) {
			data.value.passdata.push(data.value.zidingyi)
			data.value.resumeTag.push({
				type: true,
				name: data.value.zidingyi
			})
			data.value.zidingyi = ""
		}
	}

	const toSave = async () => {
		let params = {
			tag: data.value.passdata
		}
		let res = await uni.$u.api.tag(
			params
		)
		if (res) {
			uni.$u.toast('保存成功')
			setTimeout(() => {
				uni.$u.route({
					type: 'back'
				})
			}, 1000)
		}
	}
	// 返回上一页
	const toBack = () => {
		if (!data.value.isNav) {
			uni.$u.route({
				type: 'redirect',
				url: 'pages/login/status'
			})
		} else {
			uni.$u.route({
				type: 'back'
			})
		}
	}

	// 获取字典表信息
	const getClassifyInfo = async () => {
		let params = {
			type: 'resumeTag'
		}
		let res = await uni.$u.api.getClassifyInfo({
			params
		})
		if (res) {
			let resumeTag = res
			for (var i = 0; i < resumeTag.length; i++) {
				for (var k = 0; k < data.value.listdata.length; k++) {
					if (resumeTag[i].id == data.value.listdata[k]) {
						resumeTag[i].type = true
					}
				}
			}
			// 恢复自定义标签
			data.value.listdata.forEach(function(item) {
				// 自定义标签无id
				if (!parseInt(item)) {
					resumeTag.push({
						id: '',
						name: item,
						type: true
					})
				}
			})
			let passdata = data.value.listdata
			data.value.passdata = passdata
			data.value.resumeTag = resumeTag
		}
	}
	onLoad(({
		item
	}) => {
		if (item) {
			let code = decodeURIComponent(item)
			data.value.listdata = JSON.parse(code)
		}

		getClassifyInfo()
	})
</script>

<style lang="scss">
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #F8F8F8;
		box-sizing: border-box;

	}

	.container {
		padding: 30rpx;
		width: 100%;
		height: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;

		.navBig {
			.topnav {
				display: flex;
				flex-direction: column;
				margin: 20rpx 0;

				text:nth-child(1) {
					color: #000;
					font-size: 40rpx;
					font-weight: bold;
					margin: 20rpx 0;

				}

				text:nth-child(2) {
					color: #a5a5a5;
					font-size: 24rpx;

				}
			}

			:deep(.u-mode-light-primary) {
				background-color: transparent;
				color: #00D075 !important;
				border: 1px solid #00d075 !important;
			}

			.tagbox {
				display: flex;
				flex-wrap: wrap;

				.tag {
					margin: 10rpx 10rpx;
				}
			}
		}

		.btnBox {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			button {

				width: 684rpx;
				background-color: #00d075;
				color: #fff;
				height: 68rpx;
				line-height: 68rpx;
				font-size: 28rpx;
				text-align: center;
				font-family: Arial;

				&::after {
					border: none;
				}

			}

		}
	}
</style>